<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-title" content="拼豆小助手" />
	<meta name="apple-mobile-web-app-capable" content="no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="full-screen" content="yes" />
	<meta name="x5-fullscreen" content="true" />
	<title>拼豆小助手</title>
	<style type="text/css">
		* { margin: 0; padding: 0; }
		html { height: 100%; }
		body { margin: 0; height: 100%; background: #000; -webkit-text-size-adjust:100%; }

		#menu {  top: 0 }
		#tools { bottom: 0; }
		#menu, #tools { position: absolute; z-index: 1; left: 0; right: 0; }		
		#menu::before, #tools::before { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; background: #999; opacity: .5; }
		#menu ul, #tools ul { text-align: center; }
		#menu li, #tools li { display: inline-block; }	
		
		.hide { display: none !important; }
		.btn { display: block; width: 24px; height: 24px; padding: 8px; background-repeat: no-repeat; background-position: center; text-indent: -9999px; }
		.btn:active { background-color: #07e; }

		.btn-upload { display: none; background-image: url(""); background-color: #07e; }
		.btn-download { background-image: url(""); }
		.btn-zoom-in { background-image: url(""); }
		.btn-zoom-out { background-image: url(""); }
		.btn-abort { background-image: url(""); }
		.btn-minimize { background-image: url(""); }
		.btn-maximize { background-image: url(""); }
		.btn-grid { background-image: url(""); }
		.btn-crop { background-image: url(""); }
		.btn-ok { background-image: url(""); }
		.btn-cancel { background-image: url(""); }
		.btn-rotate-left { background-image: url(""); }
		.btn-rotate-right { background-image: url(""); }

		.ready .btn { display: none; }
		.ready .btn-upload { display: block; }

		#box { position: relative; height: 100%; overflow: hidden; }
		#box img { position: absolute; }

		#welcome { height: 100%; text-align: center; }
		#welcome::before { content: ''; width: 0; height: 100%; }
		#welcome::before, #welcome p { display: inline-block; vertical-align: middle; }
		#welcome p { color: #fff; }

		#loading { position: absolute; z-index: 99; top: 0; left: 0; right: 0; bottom: 0; }
		#overlay { position: absolute; width: 100%; height: 100%; background: #fff; opacity: .75; }
		#tips { position: relative; z-index: 1; }
		.animation { position: absolute; top: 50%; margin-top: -8px; width: 100%; height: 16px; margin: 0 auto; text-align: center; }   
        .animation span { display: inline-block; margin: 0 2px; width: 16px; height: 16px; background: #07e; -webkit-animation: load 1.04s ease infinite; animation: load 1.04s ease infinite; }
        @-webkit-keyframes load{
			0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
		@keyframes load{
			0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        .animation span:nth-child(1) { -webkit-animation-delay:0.13s; animation-delay:0.13s; }
        .animation span:nth-child(2) { -webkit-animation-delay:0.26s; animation-delay:0.26s; }
		.animation span:nth-child(3) { -webkit-animation-delay:0.39s; animation-delay:0.39s; }
		.animation span:nth-child(4) { -webkit-animation-delay:0.52s; animation-delay:0.52s; }
		.animation span:nth-child(5) { -webkit-animation-delay:0.65s; animation-delay:0.65s; }
	</style>
</head>
<body>
	<div id="menu" class="ready">
		<ul>
			<li>
				<a id="abort" class="btn btn-abort" href="javascript:;">中止</a>
			</li><li>
				<a id="grid" class="btn btn-grid" href="javascript:;">生成</a>
			</li><li>
				<a id="download" class="btn btn-download hide" href="javascript:;">下载</a>
			</li><li>
				<label id="upload" class="btn btn-upload" for="file">上传</label><input id="file" class="hide" type="file" accept="image/*" />
			</li>
		</ul>
	</div>
	<div id="welcome">
		<p>For 优优.</p>
	</div>
	<div id="box" class="hide">
	</div>
	<div id="tools" class="hide">
		<ul>
			<li>
				<a id="zoom-in" class="btn btn-zoom-in" href="javascript:;">放大</a>
			</li><li>
				<a id="zoom-out" class="btn btn-zoom-out" href="javascript:;">缩小</a>
			</li><li>
				<a id="maximize" class="btn btn-maximize" href="javascript:;">原始尺寸</a>
			</li><li>
				<a id="minimize" class="btn btn-minimize" href="javascript:;">适应屏幕</a>
			</li><!--<li>
				<a id="rotate-left" class="btn btn-rotate-left" href="javascript:;">向左旋转</a>
			</li><li>
				<a id="rotate-right" class="btn btn-rotate-right" href="javascript:;">向右旋转</a>
			</li><li>
				<a id="crop" class="btn btn-crop" href="javascript:;">裁切</a>
			</li>-->
		</ul>
	</div>	
	<div id="loading" class="hide">
		<div id="overlay"></div>
		<div class="animation">
			<span></span><span></span><span></span><span></span><span></span>
		</div>
	</div>
<script>
	var box = document.getElementById('box'),
		menu = document.getElementById('menu'),
		tools = document.getElementById('tools'),
		welcome = document.getElementById('welcome'),
		grid = document.getElementById('grid'),
		file = document.getElementById('file'),
		abort = document.getElementById('abort'),
		upload = document.getElementById('upload'),
		zoomIn = document.getElementById('zoom-in'),
		zoomOut = document.getElementById('zoom-out'),
		maximize = document.getElementById('maximize'),
		loading = document.getElementById('loading'),
		rotateLeft = document.getElementById('rotate-left'),
		rotateRight = document.getElementById('rotate-right');

	var zoomStep = 0.1,
		rotateStep = 10;

	var clientWidth = document.documentElement.clientWidth,
		clientHeight = document.documentElement.clientHeight;

	var image = {
		source: null,
		width: 0,
		height: 0,
		x: 0,
		y: 0,
		rotate: 0,
		isTouch: 0,
		touchPoint: {}
	};

	var canvas, context2D;

	// 马赛克
	var mosaic = function(size) {
		var r = size / 2;
		var imageData = context2D.getImageData(0, 0, canvas.width, canvas.height).data;
		for (var y = 0; y < canvas.height; y += size) {
			for (var x = 0; x < canvas.width; x += size) {
				var totalR = 0, totalG = 0, totalB = 0, totalA = 0,
					red = 0, green = 0, blue = 0, alpha;
				
				for (var j = 0; j < size; j++) {
					for (var i = 0; i < size; i++) {
						var k = (canvas.width * (y + j) + x + i) * 4;
						totalR += imageData[k];
						totalG += imageData[k + 1];
						totalB += imageData[k + 2];
						totalA += imageData[k + 3];
					}
				}

				red = Math.round(totalR / size / size);
				green = Math.round(totalG / size / size);
				blue = Math.round(totalB / size / size);
				alpha = Math.round(totalA / size / size);

				context2D.fillStyle = 'rgba(' + red + ',' + green + ',' + blue + ',255)';
				context2D.clearRect(x, y, size, size);
				context2D.beginPath();
				context2D.arc(x + r, y + r, r, 0, Math.PI * 2);
				context2D.fill();
				context2D.closePath();
			}
		}

		loading.classList.add('hide');
	};

	// :active 修正
	document.body.addEventListener('touchstart', function () {});

	// 屏幕切换/尺寸改变
	window.onresize = function(e) {
		clientWidth = document.documentElement.clientWidth,
		clientHeight = document.documentElement.clientHeight;
	};

	// 图片加载
	image.source = new Image();
	image.source.onload = function(e) {
		var w = e.target.width,
			h = e.target.height;
		if (w > clientWidth || h > clientHeight) {
			if (w / h > clientWidth / clientHeight) {
				image.width = clientWidth;
				image.height = clientWidth * (h / w); 
			} else {
				image.height = clientHeight;
				image.width = clientHeight * (w / h);
			}
		}

		image.x = image.width < clientWidth ? (clientWidth - image.width) / 2 : 0;
		image.y = image.height < clientHeight ? (clientHeight - image.height) / 2 : 0;
		image.rotate = 0;
		image.isTouch = 0;
		image.touchPoint = {};

		image.source.id = 'image';
		image.source.width = image.width;
		image.source.height = image.height;
		image.source.style.left = image.x + 'px';
		image.source.style.top = image.y + 'px';
		image.source.classList.remove('hide');
		image.source.style.transform = 'none';

		loading.classList.add('hide');
		welcome.classList.add('hide');
		box.classList.remove('hide');
		box.appendChild(image.source);
		tools.classList.remove('hide');		
		menu.classList.remove('ready');
		
	};

	// 图片移动
	image.source.addEventListener('touchstart', function(e) {
		image.isTouch = 1;
		image.touchPoint = {
			x: e.touches[0].clientX,
			y: e.touches[0].clientY
		};
	});
	image.source.addEventListener('touchmove', function(e) {
		var x, y;
		if (image.isTouch) {
			x = e.touches[0].clientX - image.touchPoint.x;
			y = e.touches[0].clientY - image.touchPoint.y;
			image.touchPoint.x = e.touches[0].clientX;
			image.touchPoint.y = e.touches[0].clientY;
			image.x = image.source.offsetLeft + x;
			image.y = image.source.offsetTop + y;
			image.source.style.left = image.x + 'px';
			image.source.style.top = image.y + 'px';
		}
	});
	image.source.addEventListener('touchen', function(e) {
		image.isTouch = 0;
		image.touchPoint = {};
	});

	// 上传
	file.addEventListener('change', function(e) {
		var file, reader;

		if (e.target.files.length == 0) return;

		file = e.target.files[0];
		loading.classList.remove('hide');
		reader = new FileReader();
		reader.onload = function(e) {			
			image.source.src = e.target.result;
		};
		reader.readAsDataURL(file);
	});

	// 取消
	abort.addEventListener('click', function(e) {
		file.value = '';
		while (box.lastChild) box.removeChild(box.lastChild);
		tools.classList.add('hide');
		menu.classList.add('ready');
		box.classList.add('hide');
		download.classList.add('hide');
		grid.classList.remove('hide');
		welcome.classList.remove('hide');
	});

	// 下载
	download.addEventListener('click', function(e) {
		var dom = document.createElement('a');
        dom.href = canvas.toDataURL('image/jpeg');
        dom.download = new Date().getTime() + '.jpg';
        dom.click();
	});

	// 放大
	zoomIn.addEventListener('click', function(e) {
		var w, h, x, y;
		w = image.width * (1 + zoomStep);
		h = image.height * (1 + zoomStep);
		x = image.x - (w - image.width) / 2;
		y = image.y - (h - image.height) / 2;
		image.width = w;
		image.height = h;
		image.x = x;
		image.y = y;
		image.source.width = w;
		image.source.height = h;
		image.source.style.left = x + 'px';
		image.source.style.top = y + 'px';
	});

	// 缩小
	zoomOut.addEventListener('click', function(e) {
		var w, h, x, y;
		w = image.width * (1 - zoomStep);
		h = image.height * (1 - zoomStep);
		x = image.x + (image.width - w) / 2;
		y = image.y + (image.height - h) / 2;
		image.width = w;
		image.height = h;
		image.x = x;
		image.y = y;
		image.source.width = w;
		image.source.height = h;
		image.source.style.left = x + 'px';
		image.source.style.top = y + 'px';
	});

	// 原始尺寸
	maximize.addEventListener('click', function(e) {
		image.width = image.source.naturalWidth;
		image.height = image.source.naturalHeight;

		image.x = image.width < clientWidth ? (clientWidth - image.width) / 2 : -(image.width - clientWidth) / 2;
		image.y = image.height < clientHeight ? (clientHeight - image.height) / 2 : -(image.height - clientHeight) / 2;

		image.source.width = image.width;
		image.source.height = image.height;
		image.source.style.left = image.x + 'px';
		image.source.style.top = image.y + 'px';
	});

	// 适应屏幕
	minimize.addEventListener('click', function(e) {
		var w = image.source.naturalWidth,
			h = image.source.naturalHeight;
		if (w > clientWidth || h > clientHeight) {
			if (w / h > clientWidth / clientHeight) {
				image.width = clientWidth;
				image.height = clientWidth * (h / w); 
			} else {
				image.height = clientHeight;
				image.width = clientHeight * (w / h);
			}
		}

		image.x = image.width < clientWidth ? (clientWidth - image.width) / 2 : 0;
		image.y = image.height < clientHeight ? (clientHeight - image.height) / 2 : 0;

		image.source.width = image.width;
		image.source.height = image.height;
		image.source.style.left = image.x + 'px';
		image.source.style.top = image.y + 'px';
	});
	
	/*
	// 向左旋转
	rotateLeft.addEventListener('click', function(e) {
		image.rotate = image.rotate - rotateStep;
		image.rotate = image.rotate < 0 ? 360 + image.rotate : image.rotate;
		image.source.style.transform = 'rotate(' + image.rotate + 'deg)';
	});

	// 向右旋转
	rotateRight.addEventListener('click', function(e) {
		image.rotate = image.rotate + rotateStep;
		image.rotate = image.rotate > 360 ? image.rotate - 360 : image.rotate;
		image.source.style.transform = 'rotate(' + image.rotate + 'deg)';
	});
	*/

	// 生成
	grid.addEventListener('click', function(e) {
		var size = 0;
		size = parseInt(prompt('格子边长（2~30）：'));
		if (isNaN(size) || size < 2 || size > 30) {
			alert('只能输入数字（2-30）！');
			return;
		}
		//loading.classList.remove('hide');
		document.getElementById('image').classList.add('hide');
		grid.classList.add('hide');
		tools.classList.add('hide');
		download.classList.remove('hide');
		canvas = document.createElement('canvas');
		canvas.width = clientWidth;
		canvas.height = clientHeight;
		box.appendChild(canvas);
		context2D = canvas.getContext('2d');
		
		context2D.save();
		if (image.rotate) {
			var x = canvas.width / 2,
				y = canvas.height / 2;
			context2D.translate(canvas.width / 2, canvas.height / 2);
			context2D.rotate(image.rotate * Math.PI/180);
			context2D.translate(-x,-y);
		}
		context2D.drawImage(image.source, image.x, image.y, image.width, image.height);
		context2D.restore();
		mosaic(size);
	});
</script>

</body>
</html>